import React from 'react';

interface FooterNavigation {
  main: {
    name: string;
    href: string;
  }[];
}

const footerNavigation: FooterNavigation = {
  main: [
    {
      name: "Bilibli",
      href: "https://space.bilibili.com/28249524?spm_id_from=333.1007.0.0",
    },
    { name: "知乎", href: "https://www.zhihu.com/people/wang-qing-gang-41" },
    { name: "Twitter", href: "https://twitter.com/wqg599252594" },
    {
      name: "Youtube",
      href: "https://www.youtube.com/channel/UChxgfdsYVrQw-jy1IxWbSNA",
    },
  ]
};

const beian = [
  {
    id: 1,
    name: "鲁公网安备 37078202000380号",
    href: "http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37078202000380",
  },
  { id: 2, name: "鲁ICP备16008370号-4", href: "https://beian.miit.gov.cn/" },
];

export default function Footer() {
  return (
    <footer className="mt-12 bg-neutral-800">
      <div className="mx-auto max-w-md py-8 px-4 overflow-hidden sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
        <nav className="-mx-3 -my-2 flex flex-wrap justify-center" aria-label="Footer">
          {footerNavigation.main.map((item) => (
            <div key={item.name} className="px-3 py-2">
              <a
                href={item.href}
                target="_blank"
                rel="noopener noreferrer"
                className="text-sm text-neutral-400 hover:text-neutral-300 transition-colors duration-200"
              >
                {item.name}
              </a>
            </div>
          ))}
        </nav>
        <p className="mt-6 text-center text-sm text-neutral-400">
          &copy; 2020 Ideaswork.cn. All rights reserved.
        </p>
        <div className="mt-4 flex justify-center space-x-6">
          {beian.map((project) => (
            <a
              key={project.id}
              href={project.href}
              target="_blank"
              rel="noopener noreferrer"
              className="text-sm text-neutral-400 hover:text-neutral-300 transition-colors duration-200"
            >
              {project.name}
            </a>
          ))}
        </div>
      </div>
    </footer>
  );
}
